<template>
    <div>
        <van-form ref="form">
            <van-field readonly clickable name="食堂" is-link label="食堂" required :value="formData.canteenName" placeholder="请选择食堂" @click="showPicker = true" :rules=rules.canteenId />
            <van-field name="uploader" label="预定人数" required :rules=rules.bookeNum>
                <template #input>
                    <van-stepper v-model="formData.bookeNum" class="stepBox" integer min="1" max="1000" />
                </template>
            </van-field>
            <van-field readonly clickable name="预定日期" is-link label="预定日期" required :value="formData.reserveTime" placeholder="请选择预定日期" @click="showTimePicker = true" :rules=rules.reserveTime />
            <van-field readonly name="预定餐次" label="预定餐次" required :value="formData.mealsType" placeholder="请选择预定餐次" :rules=rules.mealsType>
                <template #input>
                    <van-tag v-for="(item, ind) in mealsTypeList" :color="tagColor[ind] || '#4eb3e9'" :plain="item.value !== formData.mealsType" @click="onTypeConfirm(item)">{{item.name}}</van-tag>
                </template>
            </van-field>
            <van-field readonly clickable name="snugId" is-link label="包间" required :value="formData.snugName" placeholder="请选择包间" @click="showSnugPicker = true" :rules=rules.snugId />
        </van-form>
        <fullLoading v-if="loading"></fullLoading>
        <!-- 食堂名称选择 -->
        <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="canteenList" @select="onConfirm" />
        <!-- 预定日期 -->
        <van-calendar v-model="showTimePicker" @confirm="onTimeConfirm" />
        <!-- 包间选择 -->
        <van-action-sheet v-model="showSnugPicker" cancel-text="取消" :actions="snugList" @select="onSnugConfirm" />
    </div>
</template>
<script>
    import { queryDic } from '@/api/common';
    import { addBook, getListSnugBookeInfo } from "@/api/srvAssurance/smarcatering/roomOrder";
    export default {
        data () {
            return {
                showPicker: false,
                showTimePicker: false,
                showSnugPicker: false,
                formData: {
                    canteenId: '', // 食堂标识
                    canteenName: '',
                    bookeNum: 1, // 人数
                    reserveTime: '',
                    mealsType: '',
                    snugId: '',
                    snugName: ''
                },
                rules: {
                    canteenId: [
                        { required: true, message: '请选择食堂', trigger: 'onChange' }
                    ],
                    bookeNum: [
                        { required: true, type: 'number', message: '请输入预定人数', trigger: 'onBlur' }
                    ],
                    reserveTime: [
                        { required: true, type: 'date', message: '预定日期不能为空', trigger: 'onChange' }
                    ],
                    mealsType: [
                        { required: true, message: '请选择预定餐次', trigger: 'onChange' }
                    ],
                    snugId: [
                        { required: true, message: '请选择包间', trigger: 'onChange' }
                    ],
                },
                tagColor: ['#4eb3e9', '#f2a84e'],
                pickerTime: new Date(),
                canteenList: [],
                mealsTypeList: [], // 预定餐次
                loading: false,
                snugList: []
            }
        },
        created () {
            this.queryDicData();
        },
        methods: {
            // 保存
            handleSave () {
                this.$refs.form.validate().then(() => {
                    let formData = {
                        canteenId: this.formData.canteenId,
                        bookeNum: this.formData.bookeNum,
                        reserveTime: this.formData.reserveTime,
                        mealsType: this.formData.mealsType,
                        snugId: this.formData.snugId
                    }
                    this.loading = true;
                    addBook(formData).then(res => {
                        this.loading = false;
                        if (res.code === 1000) {
                            this.$Notify({ type: 'success', message: '保存成功！' });
                            this.$emit('close');
                            this.$emit('refresh');
                        }
                    }).catch(() => {
                        this.loading = false;
                    })
                })
            },
            // 预定餐次选择
            onTypeConfirm (item) {
                this.formData.mealsType = item.value;
                this.getListSnugBookeInfoData();
            },
            // 食堂名称选择
            onConfirm (item) {
                this.formData.canteenId = item.canteenId;
                this.formData.canteenName = item.canteenName;
                this.showPicker = false;
                this.getListSnugBookeInfoData();
            },
            // 预定日期选择
            onTimeConfirm (time) {
                this.formData.reserveTime = new Date(time).format('yyyy-MM-dd');
                this.showTimePicker = false;
                this.getListSnugBookeInfoData();
            },
            // 包间选择
            onSnugConfirm (item) {
                this.formData.snugId = item.snugId;
                this.formData.snugName = item.snugName;
                this.showSnugPicker = false;
            },
            // 获取未被占用的包间列表
            getListSnugBookeInfoData () {
                if (!this.formData.canteenId || !this.formData.mealsType) {
                    return;
                }
                let formData = {
                    canteenId: this.formData.canteenId,
                    reserveTime: this.formData.reserveTime,
                    mealsType: this.formData.mealsType
                }
                this.formData.snugId = '';
                this.formData.snugName = '';
                this.snugList = [];
                setTimeout(() => {
                    this.$refs.form.resetValidation('snugId');
                }, 50)
                getListSnugBookeInfo(formData).then(res => {
                    if (res.code === 1000 && res.data) {
                        res.data.forEach(item => {
                            item.name = item.snugName;
                        })
                        this.snugList = res.data;
                    }
                })
            },
            // 重置表单
            resetForm () {
                this.pickerTime = new Date();
                this.formData = {
                    canteenId: this.canteenList.length ? this.canteenList[0].canteenId : '', // 食堂标识
                    canteenName: this.canteenList.length ? this.canteenList[0].canteenName : '',
                    bookeNum: 1, // 人数
                    reserveTime: new Date(this.pickerTime).format('yyyy-MM-dd'),
                    mealsType: this.mealsTypeList.length ? this.mealsTypeList[0].value : '',
                    snugId: '',
                    snugName: ''
                }
                this.getListSnugBookeInfoData();
                setTimeout(() => {
                    this.$refs.form.resetValidation();
                })
                this.loading = false;
            },
            // 标准代码值
            queryDicData () {
                // 餐次
                queryDic('SA_MEALS_TYPE_CODE').then(res => {
                    if (res.code === 1000 && res.data) {
                        this.mealsTypeList = res.data.filter(item => item.value !== '1');
                    }
                })
            }
        }
    }
</script>

<style scoped lang='less'>
    .stepBox /deep/.van-stepper__input {
        width: 80px;
    }
    .van-form {
        .van-tag {
            margin-right: 10px;
            line-height: 22px;
            padding: 0 8px;
        }
    }
</style>